<template>
	<view class="content-box Afont" style="min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/new_goodmy_bgc.png)','background-size':'100%',}">

		<view class="padding-top-50 padding-left-40 padding-bottom-50">
			<view class="">
				<image class="w-80 h-80" :src="Imgbase + '/new_goodlx_img1.png'" mode="aspectFit" @click="back">
				</image>

			</view>
		</view>

		<view class="gojiang w100 text-center">
			<image @click="gojiangp" :src="Imgbase + '/1zhan_new_jiangbei.png'" class="w-350 h-120" mode="aspectFit">
			</image>
		</view>

		<!-- <view class="rank-type" v-if="!disabledPickRank" >
			<picker class="pick" @change="pickerChange" :disabled="disabledPickRank" mode="selector" :range="typeList"
				:value="typeIndex" range-key="name">
				<view class="uni-input">{{typeList[typeIndex].name}}</view>
			</picker>
			<view class="block">
			</view>
		</view> -->

		<view class="w-700 h-620 margin-auto"
			:style="{background:'url('+Imgbase+'/new_goodpai_img1.png)','background-size':'100% 100%',}">
			<view class="top-rank">
				<view v-for="(item, idx) in topList" :key="idx" :class="'user user-' + idx"
					class="text-center w-114 h-118">
					<view class="avatar w-114 h-118 overhid padding-4 margin-auto"
						:style="{background:'url('+Imgbase+'/new_goodmy_img1.png)','background-size':'100% 100%',}">
						<image class="w-110 h-110 " style="border-radius: 50%;" :src="item.avatar" mode="aspectFill">
						</image>
					</view>
					{{item.nickname}}
				</view>
			</view>
		</view>


		<view class="rank-rule" @click="showExplain(10)">
			排行榜规则
		</view>

		<view class="padding-top-80 w-615 h-770 margin-auto padding-left-60"
			:style="{background:'url('+Imgbase+'/new_goodpai_img2.png)','background-size':'100% 100%',}">
			<!-- <view v-for="(item, index) in lastList" :key="index" class="item-rank padding-bottom-20"
				v-if="lastList.length > 0">
				<view class="avatar">
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<text class="nickname">{{item.nickname}}</text>
				<text class="price">{{item.price}}</text>
			</view> -->

			<view class="df alc padding-bottom-30" v-for="(item,index) in lastList" :key="index">
				<!-- <view class="font-26 padding-right-20">
					{{item.index}}
				</view> -->
				<view class="w-104 h-108 padding-6"
					:style="{background:'url('+Imgbase+'/new_goodmy_img1.png)','background-size':'100% 100%',}">
					<image class="w-100 h-100 radius-50" :src="item.avatar" mode="aspectFill"></image>
				</view>
				<view class=" padding-left-20 one-line" style="width: 30%;">
					{{item.nickname}}
				</view>
				<view class="">
					{{item.price}}
				</view>
			</view>

		</view>


		<view class="cu-modal" :class="modalName=='Modal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" style="background-color:initial;margin-top: 100rpx;"
				:style="{background:'url('+Imgbase+'/gooddetail_alarm_bgs.png) no-repeat','background-size':'100% 100%'}">
				<scroll-view class="scroll text-left" scroll-y="true" v-html='explain.content'
					style="max-height: 70vh; padding: 100rpx;">
				</scroll-view>
				<view style="width: 100%;height: 200upx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				title: '排行榜',
				topList: [],
				lastList: [],
				explain: '',
				modalName: null,

				disabledPickRank: false,
				typeIndex: 0,
				typeList: [{
					name: "",
					type: "",
					value: ""
				}]
			}
		},
		onLoad() {
			this.getTypeList()
			this.getRankList("water")
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			gojiangp() {
				uni.navigateTo({
					url: '/pagesA/advanced/ranking'
				})
			},
			getTypeList() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/rank/typeList',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.typeList = res.data.list
						_this.disabledPickRank = res.data.disabledPickRank
					}
				});
			},
			pickerChange: function(e) {
				let typeList = this.typeList
				let k = e.detail.value
				if (this.typeIndex != k) {
					this.typeIndex = k
					this.getRankList(typeList[k].type, typeList[k].value)
				}
			},
			hideModal(e) {
				this.modalName = null
			},
			showExplain(id) {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Index/explain',
					data: {
						id: id
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.explain = res.data.data.desc;
						_this.modalName = 'Modal'
					}
				});
			},
			getRankList(type = "water", value = "0") {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/rank/ranking',
					data: {
						token: uni.getStorageSync('token'),
						type: type,
						value: value,
						from: 'free'
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.topList = res.data.topList
						_this.lastList = res.data.lastList
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.gojiang {
		position: fixed;
		padding-top: 5rpx;
		bottom: 30rpx;
		z-index: 2;
	}

	.content-box {
		width: 100%;

		.main-bgimg {
			position: absolute;
		}

		.rank-type {
			color: #ffffff;
			border: 2rpx solid #ffffff;
			border-left: none;
			border-radius: 0 120rpx 120rpx 0;
			height: 60rpx;
			line-height: 60rpx;
			overflow: hidden;
			padding: 0 15rpx 0 5rpx;
			position: absolute;
			left: 0;
			top: 24%;
			z-index: 10;

			display: flex;
			justify-content: space-between;

			.pick {
				max-width: 240rpx;
			}

			.block {
				width: 28rpx;
				display: flex;
				align-items: center;
				margin-left: 6rpx;

				>image {
					width: 100%;
				}
			}
		}

		.top-rank {
			display: flex;
			position: relative;

			.user {
				color: #734019;
				position: absolute;
			}

			.user-0 {
				order: 1;
				padding-top: 5%;
				left: 39%;
			}

			.user-1 {
				order: 2;
				padding-top: 15%;
				left: 63%;
			}

			.user-2 {
				order: 0;
				padding-top: 36%;
				left: 15%;
			}
		}

		.rank-rule {
			color: #A15B25;
			border: 2rpx solid #A15B25;
			border-right: none;
			border-radius: 120rpx 0 0 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 5rpx 0 15rpx;
			position: absolute;
			right: 0;
			top: 30%;
		}

		.mine-rank {
			width: 615rpx;
			margin: 50rpx auto 300rpx;
			min-height: 770rpx;
			// position: sticky;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;


			.item-rank {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;

				.pm {
					width: 20%;
				}

				.avatar {
					width: 20%;
					margin: 5% auto;

					image {
						width: 80%;
						border-radius: 50%;
					}
				}


				.price {
					width: 40%;
				}
			}

			.item-rank:first {
				border-radius: 20rpx 20rpx 0 0;
			}

			.item-rank:last-child {
				border-radius: 0 0 20rpx 20rpx;
			}

			.mine {

				.pm {
					color: #df4d4c;
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						color: #f29797;
					}
				}
			}
		}
	}
</style>